<!-- 
show-summary
:summary-method="getSummaries"
-->
<template>
  <div class="edit_table">
    <el-table 
      ref="editTable"
      :data="tableData"
      style="width: 100%"
      :row-key="tableHead.keyId"
      :border="tableHead.border" 
      :empty-text="tableHead.noDataText"
      @selection-change="(e)=>selectChange(e,tableHead.selection)"
    >
      <el-table-column
        v-for="(item, index) in tableHead.data"
        :width="item.width" 
        :key="index" 
        :label="item.name"
        :fixed="item.fixed"
        :prop="item.key" 
        :align="item.align?item.align:'left'"
        :class-name="item.prompt?'message':''"
        header-align="center"
      >
        <!-- 多级表头 -->
        <template v-if="item.children">
          <el-table-column 
            v-for="(childItem, index) in item.children" 
            :key="index"
            :label="childItem.name"
            :prop="childItem.key" 
            :align="childItem.align?childItem.align:'left'"
            :class-name="childItem.prompt?'message':''"
            header-align="center"
          >
            <edit-table-cell  @editSelectChange="selectChange" :show-input="row.editMode" slot-scope="{row}" v-model="row[item.key][childItem.key]">
              <span slot="content">{{row[item.key][childItem.key]}}</span>
            </edit-table-cell>

          </el-table-column>
        </template>
        <!-- 多级表头 -->
        
        <edit-table-cell  
          :editable-component="item.type" 
          :is-disabled="item.disabled"
          :show-input="row.editMode" 
          slot-scope="{row}"
          ref="tableCell"
          @editSelectChange="selectChange"
          v-model="row[item.key]"
          :close-event="item.type=='el-select'?'change' : 'blur'"
        >
          <!-- 下拉框 -->
          <template v-if="item.type == 'el-select'">
            <!-- <el-tag size="medium" type="primary" slot="content">{{row[item.key]}}</el-tag> -->
            <el-tag size="medium" type="primary" slot="content">{{getMapping(row[item.key], item.options)}}</el-tag>
            <template slot="edit-component-slot">
              <el-option 
                v-for="(selectItem, index) in item.options" :key="index"
                :label="selectItem.productName"
                :value="selectItem.productId"
              >
              </el-option>
              <!-- <el-option value="002" label="002课程"></el-option> -->
            </template>
          </template>
          <!-- 下拉框 -->

          
          <!-- 输入框 -->
          <span slot="content" v-else-if="item.type == 'el-input'">{{row[item.key]}}</span>
          <!-- 输入框 -->

          <!-- 文本 -->
          <span slot="content" v-else>{{row[item.key]}}</span>
          <!-- 文本 -->
        </edit-table-cell>

        
        

      </el-table-column>

    </el-table>
  </div>
</template>

<style scoped>
  
</style>


<script>
import editTableCell from "./editTableCell";
export default {
  data() {
    return {

    }
  },
  created() {

  },
  methods: {
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        columns.parentName = ''
        if (index === 0) {
          sums[index] = '合计';
          return;
        }
        const values = data.map(item => Number(item[column.property]));
        if (!values.every(value => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          // sums[index] += ' 元';
        } else {
          sums[index] = 'N/A';
        }
      });

      return sums;
    },

    // 映射下拉框
    getMapping(param, options) {
      let name = ''
      if(param && options) {
        options.forEach((item, index) => {
          if(item.productId == param) {
            name = item.productName
          }
        })
        return name
      }else{
        return '选择课程'
      }
    },

    editSelectChange(e) {
      console.log(e)
    },

    selectChange() {
      // this.$refs.tableCell.selectChange();
    }

    // selectChange(e) {
    //   console.log('aaaa')
    //   console.log(e)
    // },

    
    
  },
  computed: {
    
  },
  components: {
    editTableCell
  },
  props: ['tableHead', 'tableData']
}
</script>